<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dangdangwang</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}

			.tou {
				width: 540px;
				display: flex;
				flex-flow: row nowrap;
				line-height: 17px;
				position: relative;
			}

			p {
				font-size: 10px;
			}

			.tou1 {
				position: absolute;
				left: 40px;
			}

			.kan {
				position: absolute;
				left: 20px;
			}

			.gai {
				position: absolute;
				left: 15px;
			}

			.m1 {
				display: flex;
				flex-flow: row nowrap;
				margin-top: 20px;
				padding-top: 80px;
				width: 960px;
				height: 300px;

			}

			.heng {
				display: flex;
				flex-flow: row nowrap;
				background-color: aqua;
				height: 40px;
				width: 320px;
				margin-left: 490px;
				margin-top: 40px;
			}

			.heng li {
				margin: 10px 0px 0px 0px;
				margin-left: 20px;
			}

			.heng li a {
				margin: 0 auto;
			}

			.m2 {
				display: flex;
				flex-flow: row nowrap;
			}

			.m3 {
				position: relative;
			}

			.m3 img {
				position: absolute;
				left: 500px;
				bottom: 40px;
			}

			.shou ul {
				display: flex;
				flex-flow: row nowarp;
				background-color: red;
				height: 40px;
				width: 960px;
			}

			.shou ul li {
				margin: 10px 0px 0px 0px;
				margin-left: 24px;
			}

			.t {
				position: relative;
				margin: 40px;
			}

			img{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="t">

			<div class="m2">
				<div style="margin-top: 20px;">
					<img src="logo.jpg" alt="">
				</div>
				<div class="m3">
					<img src="icon_count.png" alt="">
					<ul class="heng">
						<li>
							<a href="#">尾品汇</a>
						</li>
						<li>
							<a href="#">当当优品</a>
						</li>
						<li>
							<a href="#">数字馆</a>
						</li>
						<li>
							<a href="#">都看阅器</a>
					</ul>
				</div>
			</div>
			<div class="shou">
				<ul>
					<li><a href="#">首页 </a></li>
					<li><a href="#">图书 </a></li>
					<li><a href="#">音像 </a></li>
					<li><a href="#">童装 </a></li>
					<li><a href="#">服装</a></li>
					<li><a href="#">鞋靴</a></li>
					<li><a href="#">运动 </a></li>
					<li><a href="#">箱包 </a></li>
					<li><a href="#">美妆</a></li>
					<li><a href="#">珠宝 </a></li>
					<li><a href="#">家居 </a></li>
					<li><a href="#">食品 </a></li>
					<li><a href="#">酒 </a></li>
					<li><a href="#">手机 </a></li>
					<li><a href="#">数码 </a></li>
					<li><a href="#">电脑 </a></li>
					<li><a href="#">家电</a></li>
				</ul>
			</div>
			<div>
				<img src="banner.png">
			</div>
			<div class="m1" style="border: 2px solid lawngreen;">
				<div class="tou">
					<div>
						<img src="book-01.jpg">
					</div>
					<div>
						<h4 style="line-height: 30px;">
							偷影子的人
						</h4>
						<p style="line-height: 30px;">
							作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译
						</p>
						<p style="line-height: 30px;">
							出版社：湖南文艺出版社
						</p>
						<p style="line-height: 30px;">
							当当价：￥ 17.90
						</p>
						<p style="line-height: 20px;">
							不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
							一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他
						</p>
					</div>
					<div class="tou1">
						<img src="bookNo1.gif" >
					</div>
				</div>
				<div>
					<div class="tou" style="width: 400px; height: 130px;">
						<div>
							<img src="book-02.jpg">
						</div>
						<div style="line-height: 25px;">
							<h4>
								看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘
							</h4>
							<p>
								作 者：柴静 著
							</p>
							<p>
								出版社：广西师范大学出版社
							</p>
							<p>
								￥ 29.40 7.4折
							</p>
						</div>
						<div class="kan">
							<img src="bookNo2.gif">
						</div>
					</div>
					<div class="tou" style="width: 400px;height: 130px;">
						<div>
							<img src="book-03.jpg">
						</div>
						<div style="line-height: 25px;">
							<h4>
								改变孩子先改变自己
							</h4>
							<p>
								作 者：贾容韬 贾毅 著
							</p>
							<p>
								出版社：作家出版社
							</p>
							<p>
								￥ 22.20 7.4折
							</p>
						</div>
						<div class="gai">
							<img src="bookNo3.gif">
						</div>
					</div>
				</div>
			</div>
			<img style="position: absolute;left: -15px; top: 280px;" src="bg_bang.gif">
			<div class="m4" style="margin-left: 20px; padding-top: 30px;">
				Copyright (C) 当当网 2004-2017, All Rights Reserved<img src="validate.gif">京ICP证041189号出版物经营许可证
				新出发京批字第直0673号
			</div>
		</div>
	</body>
</html>
